import React, { useState, useEffect } from 'react'
import './select.less'
// import EventNoteIcon from '@material-ui/icons/EventNote';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import DoneIcon from '@material-ui/icons/Done';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import { sendAnswerApi } from '@/Api'
import { connect } from 'react-redux';
import { alertDispatch } from '@/utils'

function Select(props) {
    // console.log(props);
    const [option, setOption] = useState([])
    const [isAnwsered, setIsAnwsered] = useState(false)
    const [isAnwserRight, setIsAnwserRight] = useState(false)
    useEffect(() => {
        if (props.data) {
            const temp = JSON.parse(props.data.optionContent)
            temp.sort((a, b) => a.sort - b.sort)
            temp.forEach(el => el.checked = false);
            setOption(temp)
        }
    }, [props.data])

    const onCheckFn = (item) => {
        // 单选的时候 进行排他
        if (props.data.questionType === 'one' || props.data.questionType === 'check') {
            option.forEach(e => e.checked = false)
        }
        item.checked = !item.checked
        const temp = JSON.parse(JSON.stringify(option))
        setOption(temp)
    }
    const SureAnswer = () => {
        setIsAnwsered(true)
        const Useranswer = option.filter(e => e.checked).map(e => e.key)
        const uAnswer = Useranswer.join()
        const Qanswer = props.data.answer
        setIsAnwserRight(Qanswer === uAnswer)
        const { categoryCode, id } = props.data
        sendAnswerApi({
            categoryCode,
            actionType: 'exam_test',
            userAnswer: uAnswer,
            actionCode: props.actionCode,
            id
        }).then(res => {
            if (res.errCode === 0) {
                props.success('提交成功')
            }
        }).catch(err => console.dir(err))
    }


    return (
        <div className="select-item">
            {/* <div className="head">
                <div className="head-l">
                    <EventNoteIcon />
                    <span className="Num">1</span>
                    <span>/5</span>
                </div>
            </div> */}
            <div className="select">
                <div className="question">
                    <span className="type">单选</span>
                    <span>{props?.data?.title}</span>
                </div>
                <ul className="qs-list">
                    {
                        option.map((item) => {
                            return <li key={item.key} onClick={() => onCheckFn(item)}>
                                <div className="icons">
                                    <RadioButtonUncheckedIcon style={{ display: item.checked ? 'none' : 'block' }} />
                                    <CheckCircleIcon className="checked" style={{ display: item.checked ? 'block' : 'none' }} />
                                </div>
                                <div>{item.key}.{item.value}</div>
                            </li>
                        })
                    }


                </ul>
                <div className="result">
                    <div className="btn-sure" onClick={SureAnswer} >确认</div>
                    <div className="sure-result" style={{ display: isAnwsered ? 'block' : 'none' }}>
                        <div className="right res" style={{ display: isAnwserRight ? 'block' : 'none' }}>
                            <DoneIcon /> <span>回答正确</span>
                        </div>
                        <div className="wrong res" style={{ display: !isAnwserRight ? 'block' : 'none' }}>
                            <ReportProblemOutlinedIcon />
                            <span>回答错误</span>
                        </div>
                    </div>
                    <div className="answer" style={{ display: isAnwsered ? 'block' : 'none' }}>
                        正确答案是：{props?.data?.answer}
                    </div>
                </div>
            </div>
        </div>
    )
}
export default connect(null, alertDispatch)(Select)